<script setup lang="ts">
// import { useUserStore } from "~/store/useUser";
import { useImageCache } from "~/composables/useImageCache";
const { getCoverImage } = useImageCache();
const props = defineProps({
  dataItem:{
    type:Object,
    default:()=>{
      return {}
    }
  }
})
</script>

<template>
 <div class="team-members">
   <img v-if="props.dataItem.profilePic" :src="getCoverImage(props.dataItem.profilePic)" alt="">
   <img v-else src="~/assets/app-mj.png" alt="">
	 <p>{{props.dataItem.nickName}}</p>
	 <span :class="{active: props.dataItem.duties === 1}">{{props.dataItem.duties === 1?'管理员':'员工'}}</span>
 </div>
</template>

<style scoped lang="scss">
.team-members{
	background: rgba(25,30,40,0.02);
	border-radius: 12px 12px 12px 12px;
	width: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px;
	box-sizing: border-box;
	margin-right: 12px;
	margin-bottom: 16px;
	&:nth-child(5n){
		margin-right: 0;
	}
	img{
		width: 68px;
		height: 68px;
		margin-bottom: 12px;
    border-radius: 50%;
	}
	p{
		font-weight: bold;
		margin-bottom: 8px;
		color: #191E28;
	}
	span{
		color: rgba(25,30,40,0.48);
		background: rgba(25,30,40,0.06);
		padding: 2px 8px;
		&.active{
			background: rgba(29,191,115,0.08);
			border-radius: 4px 4px 4px 4px;
			color: #1DBF73;
		}
	}
}
</style>